<template>
	<view class="detail">
		<view class="msg">
			<image :src="detail.imgUrl" mode="aspectFit" class="cover-img"></image>
			<text class="title">{{detail.title}}</text>
			<view class="tips">
				<image class="icon" src="../../static/time2.png" mode="aspectFit"></image>
				<text>开课时间：{{new Date(detail.createTime).getFullYear()}}-{{new Date(detail.createTime).getMonth() + 1}}</text>
			</view>
			<view class="tips">
				<image class="icon"  src="../../static/clock.png"></image>
				购买后 365 天内有效
			</view>
			<text class="price">￥{{ detail.realCost }}</text>
		</view>
		<view class="service">
			<text class="title">服务</text>
			<text class="content">全国名师授课，在线直播互动</text>
		</view>
		<view class="bottom">
			<!-- <uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick" @buttonClick="buttonClick" /> -->
		</view>
		
	</view>
</template>

<script>
	import { getOrderDetail, addOrder } from '@/api'
	
	import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
	export default {
		components: {
			uniGoodsNav
		},
		data() {
			return {
				detail: {},
				id: '',
				options: [{
				            icon: 'cart',
				            text: '购课单',
				        }],
				        buttonGroup: [
						// {
				  //         text: '单独购买',
				  //         backgroundColor: '#F2ABA6',
				  //         color: '#fff',
						//   loading: this.loading
				  //       },
				        {
				          text: '发起拼单',
				          backgroundColor: '#E02E24',
				          color: '#fff'
				        }
					],
					loading: false,
					price: 1,
			}
		},
		methods: {
			getCourseDetail() {
				uni.showLoading({
					title: '加载中...'
				})
				getOrderDetail({
					userId: uni.getStorageSync('openid'),
					orderId: this.id
				})
					.then(res => {
						console.log(res.oData);
						if(res.status === 200) {
							this.detail = res.oData;
						}
					})
					.finally(() => {
						uni.hideLoading();
					})
			},
			// TODO 设置 单独价  拼单价
			onClick (e) {
				// uni.showToast({
				//   title: `点击${e.content.text}`,
				//   icon: 'none'
				// })
				if(e.content.icon === 'cart') {
					uni.navigateTo({
						url:'../myCourse/myCourse'
					})
				}
			  },
		},
		mounted(ops) {
			console.log(ops)
		},
		onLoad(ops) {
			console.log(+ops.id)
			this.id = +ops.id;
			this.getCourseDetail();
		}
	}
</script>

<style>
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	
	.service {
		display: flex;
		height: 50px;
		line-height: 50px;
		padding: 0 20px;
		margin-bottom: 20px;
		background-color: #fff;
		border-top: 1px solid #e0e0e0;
	}
	
	.service .title {
		font-size: 12px;
		color:#3B4144;
	}
	
	.service .content {
		margin-left: 20px;
		font-size: 14px;
	}
	.msg {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		padding-bottom: 20px;
	}
	
	.msg > text  {
		padding-left: 30px;
		margin-top: 10px;
	}
	
	.cover-img {
		width: 100%;
		height: 200px;
	}
	
	.title {
		font-size: 18px;
	}
	
	.tips {
		display: flex;
		color: #3B4144;
		margin-top: 5px;
		font-size: 12px;
		height: 20px;
		line-height: 20px;
		padding-left: 30px;
	}
	
	.tips .icon {
		width: 20px;
		height: 20px;
		margin-right: 5px;
	}
	
	.price {
		color: #f81638;
	}
</style>
